<template>
	<view>
		<view class="flex justify-between align-center padding">
			<view class="">
				您好
				<view class="text-xl">
					{{userInfo.username}}
				</view>
			</view>
			<text class="iconfont icon-tongzhi2 text-xxl text-gray"></text>
		</view>
		<view class="padding">
			<custom-input/>
		</view>
		<swiper :indicator-dots="true" class="banner padding-left" next-margin="20px">
			<swiper-item>
				<image src="/src/static/img/1.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="/src/static/img/2.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="flex flex-wrap category" :column="4">
			<view @click="handleMenu" class="item text-center margin-tb" v-for="(item,index) in cateList" :key="index">
				<image :src="'../../static/img/icon_'+index+'.png'" mode="heightFix"></image>
				<view class="">
					{{item}}
				</view>
			</view>
		</view>
		
		<view class="padding flex justify-between">
			热门职位
			<text class="text-orange text-sm">查看更多</text>
		</view>
		
		<scroll-view scroll-x >
			<view class="padding flex">
				<company-job 
					small 
					v-for="item in hotList" 
					:data="{job:item}" 
					:key="item.objectId"
					@click="handleDetail(item.objectId!)"
				/>
			</view>
		</scroll-view>
		
		<view class="padding flex justify-between">
			最新岗位
			<text class="text-orange text-sm">查看更多</text>
		</view>
		
		<view class="padding">
			<company-job 
				v-for="item in jobList" 
				:data="{job:item}" 
				:key="item.objectId"
				@click="handleDetail(item.objectId!)"
			/>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import MyComp from '../../components/my-comp.vue';
import http from '../../utils/http'
import type { JobType } from '@/model/company';
import type { Ref } from 'vue';
import {useStore} from 'vuex'
const cateList = [
	'设计',
	'开发',
	'运维',
	'测试',
	'运营',
	'行政',
	'数据',
	'更多'
]

//渲染岗位列表
const jobList:Ref<Array<JobType>> = ref([]) //完整的岗位
const hotList:Ref<Array<JobType>> = ref([]) //随机挑选的岗位
http.get('/classes/job').then(res=>{
	let {results} = res.data
	jobList.value = results
	hotList.value = results.filter(()=>{
		return Math.random()>0.5  //随机筛选
	})
})

//获取用户信息
const store = useStore()
const userInfo = computed(()=>store.state.userInfo)

//跳转岗位详情
const handleDetail = (id:string)=>{
	uni.navigateTo({
		url:`/pages/job/detail?id=${id}`
	})
}

const handleMenu = ()=>{
	uni.showToast({
		title:'功能开发中',
		icon:'none'
	})
}
</script>

<style lang="scss">
page{
	background-color: #fff;
}      
.banner{
	height: 300upx;
	image{
		width: 95%;
		height: 100%;
	}
	swiper-item:last-child image{
		width: 100%;
	}
}
.category{
	.item{
		width: 25%;
	}
	image{
		height: 80upx;
	}
}

</style>
